<template>
  <div class="page">
    <div class="pageIndex" @click="lastPage()">上页</div>
    <div class="pageNumber">共得到数据{{this.resultNum}}条{{this.pageNum}}页,当前第{{this.curPage}}页</div>
    <div class="pageLast" @click="nextPage()">下页</div>
  </div>
</template>

<script>
export default {
  name: 'page',
  props: {
    curPage: {
      type: Number,
      default: null
    },
    pageNum: {
      type: Number,
      default: null
    },
    resultNum: {
      type: Number,
      default: null
    }
  },
  methods: {
    nextPage: function () {
      this.$parent.nextPage()
    },
    lastPage: function () {
      this.$parent.lastPage()
    }
  }
}
</script>

<style lang="stylus" scoped>
.page
  width 1000px
  height 30px;
  margin 0 auto;
  margin-top 10px;
  display flex;
  justify-content center;
  align-items center;
  .pageNumber
    width 280px;
    height 30px;
    line-height 30px;
    text-align center;
    color #409EFF;
    border-left:1px solid #409EFF;
    border-top:1px solid #409EFF;
    border-bottom:1px solid #409EFF;
  .pageIndex
    width 60px;
    height 30px;
    line-height 30px;
    text-align center;
    color #409EFF;
    border-left:1px solid #409EFF;
    border-top:1px solid #409EFF;
    border-bottom:1px solid #409EFF;
    cursor pointer
  .pageLast
    width 60px;
    height 30px;
    line-height 30px;
    text-align center;
    color #409EFF;
    border:1px solid #409EFF;
    cursor pointer
</style>
